<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/css/layui/layui.css}" rel="stylesheet">
    <link th:href="@{/static/css/layui/admin.css}" rel="stylesheet">
    <link th:href="@{/static/css/element-ui.2.13.0.css}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">修改密码</div>
                <div class="layui-card-body" style="width: 35%">
                    <el-form :model="ruleForm" label-width="80px" :rules="rules" ref="ruleForm">
                        <el-form-item label="旧密码" prop="oldPass">
                            <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
                            <el-button @click="reset('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var context = [[@{
        /}]];
</script>
<script th:src="@{/static/js/sha256.js}"></script>
<script th:src="@{/static/js/jquery.1.12.4.min.js}"></script>
<script th:src="@{/static/js/layui/layui.js}"></script>
<script th:src="@{/static/js/vue.2.6.11.js}"></script>
<script th:src="@{/static/js/element-ui.2.13.0.js}"></script>
<script type="text/javascript">
    var vm =  new Vue({
        el: '#app',
        data() {
            var validateOldPass = (rule, value, callback) => {
                if (value === ''){
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            }
            var validatePass = (rule, value, callback) => {
                if (value === ''){
                    callback(new Error('请输入密码'));
                }else {
                    callback();
                }
            }
            var validatePass2=(rule, value, callback) => {
                if (value === ''){
                    callback(new Error('请输入密码'));
                } else if (value !== this.ruleForm.pass){
                    callback(new Error('两次输入密码不一致!'));
                }else {
                    callback();
                }
            }
            return {
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    oldPass: ''
                },
                rules:{
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    oldPass: [
                        { validator: validateOldPass, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        $.ajax({
                            url: context + 'updatePassword',
                            type: 'POST',
                            data: {
                                oldPass: CryptoJS.SHA256(this.ruleForm.oldPass).toString(),
                                pass: CryptoJS.SHA256(this.ruleForm.pass).toString(),
                            },
                            success: function (res) {
                                if (res.code === 200) {
                                    vm.$message.success(res.message);
                                    vm.reset('ruleForm')
                                } else {
                                    vm.$message.error(res.message);
                                    vm.reset('ruleForm')
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                 });
            },
            reset(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>